<template>
	<view id="detail" class="detail">
		<view class="detail-top">
			<view class="detail-title">{{ detail.info.title }}</view>
			<view class="wx-message">
				<image :src="detail.info.headimgurl" mode="aspectFill" class="wx-head"></image>
				<view class="wx-nickname">
					<view class="wx-name">{{ detail.info.nickname }}</view>
					<view>{{ detail.info.time }}</view>
				</view>
				<!-- <view class="img-download">点击下载</view> -->
			</view>
			<view class="detail-content">{{ detail.info.content }}</view>
			<video v-if="detail.video.url" :src="detail.video.url" :poster="detail.video.cover" controls class="detail-video" @longpress="saveVideo(detail.video.url)"></video>
			<view class="detail-imgs">
				<image v-for="(imgs, index) in detail.img" :key="index" :src="IMG_URL + imgs.img_url" mode="widthFix" @click="previewImage(index)"></image>
			</view>
			<view class="detail-like" :style="{ 'background-color': detail.if_like == 1 ? '#FFC102' : '#323232' }" @click="bindLike"></view>
		</view>
		<!-- 空白 -->
		<view style="width: 100%;height: 20rpx;background-color: #EFEFEF;" v-if="detail.comments.length > 0"></view>
		<!-- 评论 -->
		<view class="detail-comment" v-if="detail.comments.length > 0">
			<view class="comment-title">全部评论({{detail.info.comment}})</view>
			<view class="comment-list">
				<view class="comment-item" v-for="(item, i) in detail.comments" :key="item.id">
					<image :src="item.headimgurl" mode="aspectFill" class="comment-head"></image>
					<view class="commentnickname">
						<view class="comment-name">{{ item.nickname }}</view>
						<view>{{ item.content }}</view>
					</view>
					<view class="comment-time">{{ item.time }}</view>
				</view>
			</view>
		</view>
		<view style="height: 100rpx"></view>
		<!-- 底部操作 -->
		<view class="detail-bottom">
			<view class="detail-search-box">
				<icon class="icon-search"></icon>
				<input type="text" value="" placeholder="请输入评论..." confirm-type="send" @confirm="confirm" v-model="content" />
			</view>
			<view class="detail-bottom-item">
				<icon class="icon-comment"></icon>
				<text>{{ detail.info.comment }}</text>
			</view>
			<view class="detail-bottom-item">
				<icon class="icon-like"></icon>
				<text>{{ detail.info.like }}</text>
			</view>
		</view>
	</view>
</template>

<script>
const app = getApp();
import { lifeInfo, starsInfo, lifeComment, lifeLike, nComment, galike, xShare } from '@/api/index.js';
import { formatTimeSecond } from '@/util/time.js';
export default {
	data() {
		return {
			id: '', //猫咪id
			IMG_URL: app.globalData.IMG_URL,
			detail: {},
			type: '1', //1:云撸猫 2：相亲 3：生活
			content: '',
			openid: '',
			t: 1
		};
	},
	methods: {
		// 预览图片
		previewImage: function(index) {
			let url_arr = [];
			this.detail.img.forEach(val => {
				url_arr.push(this.IMG_URL + val.img_url);
			});
			uni.previewImage({
				urls: url_arr,
				current: index
			});
		},

		// 云撸猫详情页
		starsInfo: function() {
			starsInfo({
				openid: this.openid,
				id: this.id
			}).then(res => {
				console.log(res);
				res.info.time = formatTimeSecond(res.info.time); //发布时间
				res.comments.forEach(val => {
					//评论
					val.time = formatTimeSecond(val.time);
				});
				this.detail = res;
			});
		},

		// 生活详情
		lifeInfo: function() {
			lifeInfo({
				openid: this.openid,
				id: this.id,
				type: this.t
			}).then(res => {
				res.info.time = formatTimeSecond(res.info.time); //发布时间
				res.comments.forEach(val => {
					//评论
					val.time = formatTimeSecond(val.time);
				});
				this.detail = res;
			});
		},

		// 生活评论
		lifeComment: function() {
			lifeComment({
				openid: this.openid,
				id: this.id,
				content: this.content
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '评论成功',
						duration: 2000
					});
					this.content = '';
					this.switcHinterface();
				}
			});
		},

		// 云撸猫评论
		nComment: function() {
			nComment({
				openid: this.openid,
				id: this.id,
				content: this.content
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '评论成功',
						duration: 2000
					});
					this.content = '';
					this.switcHinterface();
				}
			});
		},

		// 生活点赞
		lifeLike: function() {
			lifeLike({
				openid: this.openid,
				id: this.id
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '点赞成功',
						duration: 2000
					});
					this.switcHinterface();
				}
			});
		},

		// 云撸猫点赞
		galike: function() {
			galike({
				openid: this.openid,
				id: this.id
			}).then(res => {
				if (res == 1) {
					uni.showToast({
						title: '点赞成功',
						duration: 2000
					});
					this.switcHinterface();
				}
			});
		},

		// 点赞
		bindLike: function() {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (this.type == 1) {
				this.galike();
			} else {
				this.lifeLike();
			}
		},

		// 发送评论
		confirm: function(e) {
			if (!app.userIdentity()) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return false;
			}
			if (this.type == 1) {
				this.nComment();
			} else {
				this.lifeComment();
			}
		},

		// 接口
		switcHinterface: function() {
			if (this.type == 1) {
				this.starsInfo();
			} else {
				this.lifeInfo();
			}
		},

		// 保存视频
		saveVideo: function(url) {
			uni.showModal({
				content: '保存视频',
				success: res => {
					if (res.confirm) {
						uni.showLoading({
							title: '保存视频中...'
						});
						uni.downloadFile({
							url: url,
							success: res1 => {
								if (res1.statusCode === 200) {
									uni.hideLoading();
									uni.saveVideoToPhotosAlbum({
										filePath: res1.tempFilePath,
										success: function() {
											uni.hideLoading();
										},
										fail: err => {
											uni.getSetting({
												success(res2) {
													if (!res2.authSetting['scope.writePhotosAlbum']) {
														uni.showModal({
															title: '提示',
															content: '授权保存到相册',
															success: resp => {
																if (resp.confirm) {
																	uni.openSetting({
																		success: resPhoto => {
																			console.log(resPhoto.authSetting);
																		},
																		fail() {}
																	});
																}
															}
														});
													}
												}
											});
										}
									});
								}
							}
						});
					}
				}
			});
		},
		// 分享接口
		async xShare(openid) {
			const res = await xShare({
				type: this.type == 1 ? 6 : 5,
				goods_id: this.id,
				openid: openid,
				openid_in: app.globalData.openid
			});
		}
	},
	onLoad(options) {
		// type:"1",//活动排行类型 1:云撸猫 2：相亲 3：生活
		this.id = options.id;
		this.type = options.type;
		this.t = options.t;
		this.openid = uni.getStorageSync('openid');
		this.switcHinterface();
		// 分享接口
		if (options.openid) {
			this.xShare(options.openid);
		}
	},
	onShow() {
		this.openid = uni.getStorageSync('openid');
	},
	// 分享
	onShareAppMessage() {
		return {
			title: 'nabercat-life',
			path: `/pages/detail/detail?id=${this.id}&type=${this.type}&t=${this.t}&openid=${app.globalData.openid}`
		};
	}
};
</script>

<style scoped lang="scss">
@mixin itemFlex {
	display: flex;
	align-items: center;
}

.detail-top {
	padding: 26rpx 32rpx 52rpx 32rpx;

	.detail-title {
		color: #333333;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 50rpx;
		margin-bottom: 38rpx;
	}

	.wx-message {
		@include itemFlex();
		padding-bottom: 36rpx;
		border-bottom: 2rpx solid #efefef;
		margin-bottom: 52rpx;
		position: relative;

		.wx-head {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.wx-nickname {
			flex: 1;
			color: #999999;
			font-size: 22rpx;

			.wx-name {
				font-size: 28rpx;
				color: #333333;
				font-weight: 600;
				margin-bottom: 4rpx;
			}
		}

		.img-download {
			position: absolute;
			right: 0;
			top: 14rpx;
		}
	}

	.detail-content {
		color: #333333;
		font-size: 32rpx;
		line-height: 52rpx;
		margin-bottom: 32rpx;
	}

	.detail-video {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.detail-imgs {
		margin-bottom: 88rpx;
		width: 100%;

		& > image {
			// height: 420rpx;
			width: 100%;
			margin-bottom: 20rpx;
		}
	}

	.detail-like {
		width: 118rpx;
		height: 118rpx;
		background: #323232;
		border-radius: 50%;
		margin: 0 auto;
	}

	.detail-like {
		width: 118rpx;
		height: 118rpx;
		background: #323232;
		border-radius: 50%;
		margin: 0 auto;
		position: relative;

		&::before {
			content: '';
			width: 58rpx;
			height: 58rpx;
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/naber-detail-zandianzan.png) no-repeat;
			background-size: cover;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
}

.detail-comment {
	padding: 52rpx 0 52rpx 32rpx;

	.comment-title {
		color: #333333;
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 35rpx;
	}

	.comment-list {
		.comment-item {
			// @include itemFlex();
			position: relative;
			display: flex;
			.comment-head {
				height: 60rpx;
				width: 60rpx;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.commentnickname {
				color: #333333;
				font-size: 24rpx;
				flex: 1;
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #efefef;
				margin-bottom: 32rpx;

				.comment-name {
					font-size: 20rpx;
					color: #666666;
				}
			}

			.comment-time {
				color: #999999;
				font-size: 20rpx;
				position: absolute;
				top: 3rpx;
				right: 32rpx;
			}
		}
	}
}

.detail-bottom {
	padding: 15rpx 32rpx;
	width: 100%;
	height: 98rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	@include itemFlex();

	icon {
		width: 40rpx;
		height: 40rpx;
	}

	.detail-search-box {
		@include itemFlex();
		flex: 1;
		height: 100%;
		background: #f1f2f6;
		border-radius: 8rpx;
		padding: 0 18rpx;

		.icon-search {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/nabercat-detailFill.png) no-repeat;
			background-size: cover;
			margin-right: 10rpx;
		}

		& > input {
			height: 100%;
		}
	}

	.detail-bottom-item {
		@include itemFlex();
		flex-direction: column;
		color: #333333;
		font-size: 20rpx;
		margin-left: 52rpx;

		.icon-comment {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/nabercat-detail-xx.png) no-repeat;
			background-size: cover;
		}

		.icon-like {
			background: url(https://nabercat.oss-cn-hangzhou.aliyuncs.com/acat-xcx/nabercat-detail-dianz.png) no-repeat;
			background-size: cover;
		}
	}
}
</style>
